<template>
	<view class="index">
		<uni-nav-bar left-icon="back" left-text=' ' fixed="true" statusBar="true" backgroundColor="transparent"
			title="真薪购" />
		<view class="fixed-top">
			<view class="distribution_bg">
				<view class="distribution_left">
					<image :src="userInfo.avatar" class="head"></image>
					<view>
						<view class="distribution_name">{{userInfo.nickname}}</view>
						<view v-if="1" class="distribution_text"><text class="iconfont iconhuangguan1"></text>一级分销商
						</view>
						<view v-else class="distribution_text"><text class="iconfont iconhuangguan1"></text>二级分销商</view>
						<view class="distribution_text"><text class="iconfont iconrenshu"></text>{{num}}人</view>
					</view>
				</view>
				<view class="distribution_right">
					<view class="right_price">
						<view class="distribution_desc">可提现佣金（元）</view>
						<view class="distribution_price">￥{{userInfo.commission}}</view>
					</view>
					<view class="distribution_btn" @click="withdrawal">提现</view>
				</view>
			</view>
			<view class="summary">
				<view class="summary_list">
					<view>{{userInfo.total_commission}}</view>
					<text>总佣金</text>
				</view>
				<view class="summary_list">
					<view>{{userInfo.withdraw_commission}}</view>
					<text>累计提现</text>
				</view>
			</view>
			<view class="news_box">
				<view class="news_list" v-for="item in news" @click="toDistribution(item.url)" :key="item.url">
					<view>
						<image :src="item.icon" mode="heightFix"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				news: [{
						icon: '/static/img/distribution_1.png',
						name: '我的团队',
						url: 'team',
						color: ''
					},
					{
						icon: '/static/img/distribution_2.png',
						name: '我要推广',
						url: '/pages/indexNav/share'
					},
					{
						icon: '/static/img/distribution_3.png',
						name: '分销订单',
						url: 'fenxiaoOrder'
					},
					{
						icon: '/static/img/distribution_4.png',
						name: '佣金明细',
						url: 'commission'
					},

					{
						icon: '/static/img/distribution_6.png',
						name: '银行卡',
						url: 'bankCardList'
					},
					{
						icon: '/static/img/distribution_5.png',
						name: '提现',
						url: 'withdrawal'
					},
				],
				num: 0
			}
		},
		methods: {
			toDistribution(url) {
				uni.navigateTo({
					url: url
				})
			},
			withdrawal() {
				uni.navigateTo({
					url: 'withdrawal'
				})
			},
			invite() {
				this.$get(this.$api.dInvitation, {}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.num = data.data;
					}
				})
			},
		},
		onShow() {
			uni.removeStorageSync('bankCard')
			let _ = this;
			_.invite()
			_.$get(_.$api.userInfo, {}, (res) => {
				let {
					data
				} = res;
				if (data.code == 1) {
					_.userInfo = data.data;
				}
			})
		}
	}
</script>

<style scoped>
	.index {
		min-height: 100vh;
		background: white;
	}

	.distribution_bg {
		width: 100%;
		height: 468rpx;
		/* position: relative; */
		/* background: #FFE048; */
		background-image: url('http://byjlb.jxsxkeji.com/upload/2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* align-items: center; */

		/* justify-content: space-between; */
		padding: 168rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.custom_blocck1 {
		height: 0 !important;
		padding: 0 !important;
	}

	.bg_img {
		width: 100%;
		height: 420rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}

	.distribution_left {
		display: flex;
		align-items: center;
	}

	.distribution_right {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.right_price {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
	}

	.head {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.distribution_name {
		font-size: 36rpx;
		color: #333333;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.distribution_text {
		font-size: 22rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.distribution_text text {
		font-size: 36rpx;
		margin-right: 10rpx;
	}

	.distribution_price {
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF0000;
	}

	.distribution_desc {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.distribution_btn {
		width: 146rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		line-height: 60rpx;
	}

	.summary {
		display: flex;
		align-items: center;
		height: 142rpx;
		border-bottom: 2rpx solid #eee;
	}

	.summary_list {
		flex: 1;
		text-align: center;
	}

	.summary_list view {
		font-size: 48rpx;
		color: #FF0000;
	}

	.summary_list text {
		font-size: 26rpx;
		color: #333333;
	}

	.news_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.news_list {
		width: 250rpx;
		height: 156rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 2rpx solid #eee;
		border-right: 2rpx solid #eee;
		box-sizing: border-box;
	}

	.news_list view {
		text-align: center;
	}

	.news_list view view {
		font-size: 26rpx;
		color: #333333;
	}

	.news_list image {
		width: 58rpx;
		height: 42rpx;
	}

	.index /deep/ .uni-navbar__header-btns-left {
		width: 120rpx;
	}

	.index .fixed-top {
		position: absolute;
		top: 0;
	}

	.index /deep/ .uni-navbar--border {
		border: none;
	}
</style>
